/*
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-10 19:07:56
 */
import React, { memo, useEffect, useState } from "react";
import "./songListDetail.scss";
import { Image } from "antd";
import { useLocation } from "react-router-dom";
import {
  getSongListDetail,
  getSongListSongs,
} from "@/service/api/songList/songList";
import MyTable from "@/components/myTable/MyTable";
import SvgIcon from "@/components/SvgIcon/SvgIcon";
import { numberAddUnit } from "@/utils/util";
import { usePlay } from "@/hooks/play/usePlay";
import { IColumn } from "@/components/myTable/types";
import { IAllObject } from "@/types/base";
import { useTime } from "@/hooks/time/useTime";
import { useView } from "@/hooks/view/useView";
import { useSong } from "@/hooks/song/useSong";

interface ISongListDetailProps {}
// 默认的详情数据
const defaultDetail = {
  coverImgUrl: "",
  shareCount: "",
  playCount: "",
  trackCount: "",
  subscribedCount: "",
  tags: [],
  createTime: new Date().getTime(),
  creator: {
    avatarUrl: "",
  },
};
const { unixToYMD } = useTime();
const { keywordHighLight } = useView();
const { getSongName, getSingers, getSongTime } = useSong();

const SongListDetail: React.FC<ISongListDetailProps> = memo((props) => {
  const {
    state: { id },
  }: { state: any } = useLocation();
  const { playState, playMusic, playSongList } = usePlay();
  const [detail, setDetail] = useState<any>(defaultDetail),
    [songList, setSongList] = useState([]),
    [showDetail, setShowDetail] = useState(false);
  // 点击歌曲名称,播放音乐
  const titleClick = (row: IAllObject) => {
    if (playState.songId === row.id) return;
    playMusic(row.id);
  };
  // 表格
  const columns: IColumn[] = [
    {
      label: "标题",
      prop: "name",
      flex: 5,
      class: "text-main-text-color",
      dbClick: titleClick,
    },
    {
      label: "歌手",
      prop: "singer",
      flex: 2,
    },
    {
      label: "专辑",
      prop: "album",
      flex: 3,
    },
    {
      label: "时长",
      prop: "time",
      flex: 1,
    },
  ];
  useEffect(() => {
    (async () => {
      const detailData = await getSongListDetail(id);
      setDetail(detailData.playlist);
      setSongList([]);
      const songListData = await getSongListSongs(id);
      setSongList(songListData.songs);
    })();
  }, [id]);

  return (
    <div className="my-6 songListDetail">
      {/* 头部 */}
      <div className="flex w-full px-5 header">
        <div className="mr-4 w-44 h-44">
          <Image src={detail.coverImgUrl} className="rounded" preview={false} />
        </div>
        <div style={{ width: "calc(100% - 212px)" }}>
          <div className="flex-c">
            <span className="px-1 mr-4 border rounded-sm border-theme-color text-theme-color trans text-13">
              歌单
            </span>
            <span className="text-2xl font-bold text-main-text-color">
              {detail.name}
            </span>
          </div>
          <div className="mt-2 flex-c">
            <Image
              src={detail.creator.avatarUrl}
              width={24}
              preview={false}
              style={{ marginRight: "8px" }}
              className="rounded-full"
            />
            <span className="mx-2 text-13 text-link-color">
              {detail.creator.nickname}
            </span>
            <span>{unixToYMD(detail.createTime)}创建</span>
          </div>
          <div className="flex header-btns">
            <button onClick={() => playSongList(id)}>
              <SvgIcon name="play-icon" />
              <span>播放全部</span>
            </button>
            <button>
              <SvgIcon name="add-collect-icon2" />
              <span>收藏({numberAddUnit(detail.subscribedCount)})</span>
            </button>
            <button>
              <SvgIcon name="share-icon" />
              <span>分享({numberAddUnit(detail.shareCount)})</span>
            </button>
            <button>
              <SvgIcon name="download-icon" />
              <span>下载全部</span>
            </button>
          </div>
          <div className="mt-2 text-13">
            标签：
            <span
              className="text-link-color"
              dangerouslySetInnerHTML={{
                __html: keywordHighLight(detail.tags.join(" / "), "/", "#ccc"),
              }}
            ></span>
          </div>
          <div className="mt-px text-13">
            歌曲：{detail.trackCount} 播放：{numberAddUnit(detail.playCount)}
          </div>
          <div className={`mt-px text-13 flex-b ${!showDetail && "h-8"}`}>
            <div className="flex">
              <span className="whitespace-nowrap">简介：</span>
              <pre className="overflow-hidden break-words whitespace-pre-wrap text-sub-text-color">
                {detail.description}
              </pre>
            </div>
            <div
              className={`w-3 h-2 text-sub-text-color transition duration-300 ${
                showDetail && "transform -rotate-180"
              }`}
            >
              <SvgIcon
                name="triangle"
                size={13}
                click={() => setShowDetail(!showDetail)}
              />
            </div>
          </div>
        </div>
      </div>
      {/* tab栏 */}
      <div className="tabs"></div>
      <MyTable
        tableData={songList}
        columns={columns}
        name={(scope: any) => {
          return (
            <span
              className="cursor-pointer"
              dangerouslySetInnerHTML={{
                __html: getSongName(scope.name, scope.alia),
              }}
            ></span>
          );
        }}
        singer={(scope: any) => getSingers(scope.ar)}
        album={(scope: any) => scope.al.name}
        time={(scope: any) => getSongTime(scope.dt)}
      ></MyTable>
    </div>
  );
});

export default SongListDetail;
